<template>
    <div>
        <div class="outmain ba_f">
            <div class="ba_f t_c">
                <div class="shuju_title mar_b20">
                    <div class="shuju_title_text">
                        <span>交易统计</span>
                    </div>
                </div>
                <div class="flex-g-1 pad_20">
                    <ul class="flex-bet pad_lr_30">
                        <li class="flex-col">
                            <p class="color_9 fon_12">累计消费金额</p>
                            <p class="mar_t3">
                                <span class="fon_22 color_3 font_w700"><a href="#">{{form.money || 0}}</a></span>
                            </p>
                        </li>
                        <li class="flex-col">
                            <p class="color_9 fon_12">累计订单数</p>
                            <p class="mar_t3">
                                <span class="fon_22 color_3 font_w700"><a href="#">{{form.count || 0}}</a></span>
                            </p>
                        </li>
                        <li class="flex-col">
                            <p class="color_9 fon_12">累计维权订单数</p>
                            <p class="mar_t3">
                                <span class="fon_22 color_3 font_w700"><a href="#">{{form.weicount || 0}}</a></span>
                            </p>
                        </li>
                        <li class="flex-col">
                            <p class="color_9 fon_12">累计退款金额</p>
                            <p class="mar_t3">
                                <span class="fon_22 color_3 font_w700"><a href="#">{{form.reundcount || 0}}</a></span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="shuju_title mar_b20 mar_t10">
                <div class="shuju_title_text">
                    <span>用户详情</span>
                </div>
            </div>
            <div class="nameinfo fon_12 bor_rad4 flex">
                <div class="flex-y-top flex-g-0">
                    <img class="namelogo" :src="form.portrait">
                    <span class="mar_l15 mar_t10">{{form.userName}}</span>
                    <span class="mar_l15 mar_t10">userId：{{form.id}}</span>
                </div>
                <div class="mar_l140 flex-g-1">
                    <ul class="flex">
                        <li class="bdt flex-col mar_l140">
                            <p>余额</p>
                            <p class="mar_t3">
                                <span class="fon_22 mar_r8 color_3 font_w700 subjectcolor2">{{form.balance || 0}}</span>
                            </p>
                        </li>
                        <li class="bdt flex-col mar_l140">
                            <p>积分</p>
                            <p class="mar_t3">
                                <span class="fon_22 mar_r8 color_3 font_w700 subjectcolor2">{{form.integral || 0}}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <el-form ref="form" :model="form" label-width="180px" class="mar_t20">
                <el-form-item label="用户标签">
                    <el-select v-model="form.vipLabel" placeholder="用户标签">
                        <el-option
                                v-for="item in labelData"
                                :key="item.id"
                                :label="item.labelName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {changeDate} from "@/utils/index";
    import {getMemberLabel, getMemberInfo, memberInfoSave} from "@/api/user";
    import {mapState} from "vuex";

    export default {
        computed:{
            ...mapState(['storeId'])
        },
        created() {
            this.init()
            // console.log('this.$route.params.id;',this.$route.query.id)
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
        },
        name: "userquery",
        data() {
            return {
                form: {
                    realName: '',
                    portrait: '',
                    userName: '',
                    vipLabel: '',
                    userTel: '',
                    openId: '',
                    balance: '',
                    integral: '',
                    createdAt: '',
                    birthday: '',
                    id: '',
                    weicount: '',
                    reundcount: '',
                },
                form2: {},
                labelData: [],

            }
        },
        methods: {
            async edit() {
                const {data} = await getMemberInfo({id: this.id,storeId: this.storeId})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
            },
            async init() {
                const {data} = await getMemberLabel({storeId: this.storeId});
                this.labelData = data;
            },
            async onSubmit() {
                this.form.birthday = changeDate(this.form.birthday);
                this.form.storeId = this.storeId;
                const {msg} = await memberInfoSave(this.form);
                this.$baseMessage(msg, "success");
                this.edit();
                this.$router.go(-1)
            }
        }
    }
</script>
<style>
    .searchform .el-form-item {
        margin-bottom: 0;
    }

    .nameinfo {
        background-color: #F0FAFF;
        margin: 20px 30px 10px 30px;
        padding: 20px 30px
    }

    .namelogo {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .mar_l140 {
        margin-left: 100px;
    }
</style>
